import React, { useEffect } from "react";
import { useDispatch } from "@/redux";
import { useNavigate } from "react-router-dom";
import { setToken } from "@/redux/modules/user";
import { setTabsList } from "@/redux/modules/tabs";
import { LOGIN_WEB_URL } from "@/config";
import { api } from "../../api/index.ts";
import { SegmentedList } from "../../../views/homePage/componts/componts";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import settings_icon from "@/assets/images/home_index/right_bar/settings-icon@2x.png";
import avatar from "@/assets/images/home_index/right_bar/avatar@2x.png";
import user from "@/assets/images/user.png";
import collect from "@/assets/images/collect.png";
import dustbin from "@/assets/images/dustbin.png";
import log_out from "@/assets/images/log_out.png";
import { modal, message } from "@/hooks/useMessage";
import "./index.less";
const MySetting: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  useEffect(() => {}, []);
  function handleTabChange() {}
  async function logout() {
    // debugger
    modal.confirm({
      title: "温馨提示",
      icon: <ExclamationCircleOutlined />,
      content: "是否确认退出登录？",
      okText: "确认",
      cancelText: "取消",
      maskClosable: true,
      onOk: async () => {
        // Execute the logout interface
        await api.logoutApi();
        // Set token to empty
        dispatch(setToken(""));
        // Set menu list empty
        dispatch(setTabsList([]));
        // Jump to login page
        navigate(LOGIN_WEB_URL, { replace: true });
        message.success("退出登录成功！");
      }
    });
  }
  return (
    <div>
      <div className="right-bar">
        <div className="right-top">
          <div className="title">
            <img src={settings_icon} alt="" />
            设置
          </div>
          <div className="tab-list">
            <SegmentedList
              tabList={["我的", "个性化设置", "主题"]}
              activeColor="#7EBEFF"
              inactiveColor="#fff"
              onChange={handleTabChange}
            />
          </div>
        </div>
        <div className="right-center">
          <div className="user-info">
            <div>
              <img className="avatar" src={avatar} alt="" />
            </div>
            <div className="user-name">用户ID899EE5</div>
            <div className="user-position">财务资金部/综合管理处</div>
            <div className="operation-btn">
              <img src={user} alt="" />
              <div>资料设置</div>
            </div>
            <div className="operation-btn">
              <img src={collect} alt="" />
              <div>我的收藏</div>
            </div>
            <div className="operation-btn">
              <img src={dustbin} alt="" />
              <div>回收站</div>
            </div>
            <div
              className="operation-btn"
              onClick={() => {
                logout();
              }}
            >
              <img src={log_out} alt="" />
              <div className="login_out">退出系统</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MySetting;
